<script setup lang="ts">
export interface SortType {
  label: string;
  // 排序字段名称
  value: string | number;
  checked: boolean;
  // 排序字段
  sort: string | "ascs" | "descs";
  // 是否隐藏排序图标
  hideIcon?: boolean;
}

const props = defineProps({
  data: {
    type: Array as any,
    default: () => [],
  },
});
const emits = defineEmits(["change"]);

const sortClick = (val: SortType, index: number) => {
  console.log("sortClick", val, index);
  props.data.forEach((item: SortType, itemIndex: number) => {
    if (itemIndex == index) {
      // 如果当前选中的是已选中的，则判断排序
      if (item.checked) {
        if (item.sort == "ascs") {
          item.sort = "descs";
        } else {
          item.sort = "ascs";
        }
      }

      item.checked = true;
    } else {
      // 如果当前选中的不是当前选中的，则取消选中
      item.checked = false;
      item.sort = "ascs";
    }
  });

  emits("change", val);
};
</script>

<template>
  <view class="sort">
    <view
      class="line"
      v-for="(item, index) in data"
      :key="index"
      @click="sortClick(item, index)"
    >
      <view class="label" :class="{ select: item.checked }">{{
        item.label
      }}</view>

      <template v-if="item.hideIcon !== true">
        <!--asc select-->
        <image
          src="@/static/sort/sort_asc_select.png"
          mode="widthFix"
          v-if="item.checked && item.sort == 'ascs'"
        />

        <!--asc unselect-->
        <image
          src="@/static/sort/sort_asc_unselect.png"
          mode="widthFix"
          v-if="!item.checked && item.sort == 'ascs'"
        />

        <!--desc select-->
        <image
          src="@/static/sort/sort_desc_select.png"
          mode="widthFix"
          v-if="item.checked && item.sort == 'descs'"
        />

        <!--desc unselect-->
        <image
          src="@/static/sort/sort_desc_unselect.png"
          mode="widthFix"
          v-if="!item.checked && item.sort == 'descs'"
        />
      </template>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.sort {
  display: flex;
  align-items: center;

  .label {
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: 0px;

    /* tab未选 */
    color: #999999;
  }

  .label.select {
    color: #303030;
  }

  .line {
    margin-right: 30px;
    display: flex;
    align-items: center;

    image {
      margin-right: 8px;
      width: 20px;
    }
  }

  .line:last-child {
    margin: 0;
  }
}
</style>
